<%--
  Created by IntelliJ IDEA.
  User: ChengLong Cai
  Date: 2020/1/7
  Time: 14:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="/desk/assets/js/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
    <link rel="icon" href="assets/img/favicon.jpg" sizes="32x32">
</head>
<body>
<table class="table">
    <tr>
        <td><input id="nickname" name="nickname" placeholder="请输入昵称"/><span id="nicknametxt"></span></td>
    </tr>
    <tr>
        <td>
            性别：男<input name="sex" type="radio" value="0"/>
            女<input name="sex" type="radio" value="1"/>
        </td>
    </tr>
    <tr>
        <td>
            生日：<input id="birthday" name="birthday" type="date"/>
        </td>
    </tr>
    <tr>
        <td><input id="realname" name="realname" placeholder="请输入真实姓名"/><span id="realnametxt"></span></td>
    </tr>
    <tr>
        <td><input id="idnumber" name="idnumber" placeholder="请输入身份证号"/><span id="idnumbertxt"></span></td>
    </tr>
    <tr>
        <td><input id="uphone" name="uphone" placeholder="请输入您的手机号码"/><span id="uphonetxt"></span></td>
    </tr>
    <tr>
        <td><input id="yzmtxt"/><a id="yzm" href="javascript:void(0)">发送验证码</a>
            <div id="dom" style="display: none" class="nc-container"></div>
        </td>
    </tr>
    <tr>
        <td><input id="password" type="password" name="password" placeholder="请输入密码"/><span id="upasstxt"></span></td>
    </tr>
    <tr>
        <td><input id="repassword" type="password" placeholder="再次输入密码"/><span id="reupasstxt"></span></td>
    </tr>
    <tr>
        <td>
            <input id="sub" type="button" value="注册"/>
        </td>
    </tr>
</table>
</body>
</html>
<script type="text/javascript">
    $("#yzm").click(function () {

        var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
        var NC_Opt =
            {
                //声明滑动验证需要渲染的目标元素ID。
                renderTo: "#dom",
                //应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
                appkey: "CF_APP_1",
                //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
                scene: "register",
                //滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
                token: nc_token,
                //滑动条的宽度。
                customWidth: 300,
                //业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
                trans: {"key1": "code0"},
                //语言。PC端Web页面场景默认支持18国语言，详细配置方法请参见自定义文案与多语言文档。
                language: "cn",
                //是否启用。一般情况，保持默认值（true）即可。
                isEnabled: true,
                //内部网络请求的超时时间。一般情况建议保持默认值（3000ms）。
                timeout: 3000,
                //允许服务器超时重复次数，默认5次。超过重复次数后将触发报错。
                times: 5,
                //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
                callback: function (data) {
                    setTimeout(function () {
                        $("#dom").hide(500)
                    }, 1000);
                    setTimeout($.ajax({
                        url: "/customer/yzm",
                        type: "post",
                        data: {"uphone": $("#uphone").val()},
                        dataType: "text",
                        success: function (data) {
                            if (data == "true") {
                                alert("验证码已发送");
                            } else {
                                alert("验证码发送失败");
                            }
                        }
                    }), 1000);

                }
            }
        var nc = new noCaptcha(NC_Opt);
        //用于自定义文案。详细配置方法请参见自定义文案与多语言文档。
        nc.upLang('cn', {
            _startTEXT: "请按住滑块，拖动到最右边",
            _yesTEXT: "验证通过",
            _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
            _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>"
        })
        $("#dom").show(500);
    });
    //提交
    $("#sub").click(function () {
        $.ajax({
            url: "/customer/register",
            type: "post",
            data: {
                "nickname": $("#nickname").val(),
                "realname": $("#realname").val(),
                "idnumber": $("#idnumber").val(),
                "uphone": $("#uphone").val(),
                "password": $("#password").val(),
                "sex": $('input[name="sex"]:checked').val(),
                "birthday": $("#birthday").val(),
                "yzm": $("#yzmtxt").val()
            },
            dataType: "text",
            success: function (data) {
                if (data == "true") {
                    location.href = "login.jsp";
                } else {
                    alert("验证码输入错误");
                }
            }
        })
    });

</script>
